<template> 
    <div class="classify">
        <Title></Title>
        <div class="subject">
            <div class="sidebar">

                <li v-for="(item , index) in nav" :key="index" >
                    <router-link :to='url[index]'>
                        <span > {{ item }} </span>
                    </router-link>
                </li>
            </div>
            <div class="show">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template> 

<script>   
import Title from '../components/Title'  
export default {
    components: {
        Title,
    },
    data(){
        return {
            nav:['品牌推荐','光学镜架','太阳眼镜','品牌镜片'],
            url:[
                '/classify/recommend',
                '/classify/optics',
                '/classify/sun',
                '/classify/brand',    
            ],
            norm:0
        }
    },
    methods:{

        
    }
}
</script>

<style lang='scss'>
    .classify{
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        .subject{
            display: flex;
            flex: 1;
            overflow: hidden;
            .sidebar{
                height: 100%;
                width: 1.53rem;
                border-right: 0.01rem solid #ccc;
                background: #fff;
                li{
                    text-align: center;
                    span{
                        display: inline-block;
                        padding:0 0.06rem 0;
                        font-size: 0.24rem;
                        color: #000;
                        line-height: 0.6rem;
                        border-bottom: 0.02rem solid #e8e8e8;
                        margin: 0.21rem 0 0.17rem 0
                    }
                }
                

            }
            .show{
                flex: 1;
                overflow: auto;
            }
            
        }
        .router-link-exact-active{
            span{
                color: #d61619!important;
                border-bottom:0.04rem solid #d61619!important;
            }
        }  
            
    }
</style>
